<template>
	<view>
		<view>
			<u-swiper :list="detail.productImageUrl" :circular="true" img-mode="aspectFit" height="340" bg-color="#ffffff"></u-swiper>
		</view>
		<view class="p-10">
			<view class="padding-tb padding-lr-sm bg-white radius-5">
				<view class="font-32 text-bold pro-name">
					<text>{{detail.productName}}</text>
				</view>
				<view class="flex justify-between m-t-8">
					<view class="flex">
						<view>
							<text class="font-28">价格：</text>
							<text class="font-32 text-theme">￥</text>
							<text class="font-36 text-theme text-bold">{{detail.price}}</text>
						</view>
						<view class="m-l-20 m-t-6 color-gray text-through font-26 font-b">￥{{detail.productPrice}}</view>
					</view>
				</view>
				<view>
					<text class="font-2">库存：{{detail.inventory || 0}}</text>
				</view>
			</view>
			<view class="p-l-10 p-r-10 p-t-10 p-b-10 bg-white margin-top-sm radius-5">
				<view class="font-32 margin-bottom">商品介绍</view>
				<view class="boxDetail">
					<view class="contenr" v-if="isArray(detail.productDetail)">
						<image class="img" mode="widthFix" v-for="(item, index) in detail.productDetail" :key="index" :src="item" />
					</view>
					<text style="width: 100%;" v-else v-html="detail.productDetail"></text>
				</view>
			</view>
		</view>
		<view class="footer-h"></view>
		<view class="footer">
			<view class="w-25 flex flex-row-center flex-col flex-col-center" @click="toCart">
				<u-icon name="shopping-cart" size="24"></u-icon>
				<view class="font-24 cartName">购物车</view>
			</view>
			<view class="flex flex-1">
				<view class="btn" @click="toBuy('加入购物车')">加入购物车</view>
				<view class="btn" @click="toBuy('立即购买')">立即购买</view>
			</view>
		</view>
		
		<u-popup class="w-100" mode="bottom" bgColor="white" :safeAreaInsetBottom="false" :show="specsShow" @close="specsShow = false">
			<view class="specBox p-20 border-box">
				<view class="flex m-t-20">
					<view>
						<image :src="detail.mainImageUrl" class="imgsBox"></image>
					</view>
					<view class="m-l-10">
						<view class="text-bold text-cut2 font-30">{{detail.productName}}</view>
						<view class="m-t-20 text-theme font-32 font-b">￥{{detail.price}}</view>
					</view>
				</view>
				<view>
					<view class="font-30 font-b m-t-20">规格</view>
					<view class="m-t-10 flex flex-wrap boxContent">
						<view :class="index==current?'isActive boxItem':'boxItem'" v-for="(item,index) in detail.skuList" :key="index" @click="clickSpec(item,index)">{{ item.specValue }}</view>
					</view>
				</view>
				<view class="flex flex-col-center justify-between m-t-20">
					<view class="font-30 font-b">购买数量</view>
					<u-number-box v-model="buyCount" :min="1" />
				</view>
				<view class="w-100 m-t-50">
					<view class="bg-yellow line-h-80 w-100 text-center font-28 color-w b-r-80" @click="toSubmit">{{ submitTxt }}</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { productDetail,addGoodsToCart } from '@/common/api/product.js'
	import { orderCreate } from '@/common/api/order.js'
	import specs from '@/pages/points/specs'
  	import {isArray} from "lodash";
	export default {
		components: {
			specs
		},
		data() {
			return {
				background: {
					backgroundColor: '',
				},
				productId: '',
				detail: {},// 商品详情
				specsShow: false,//规格弹窗
				currentDate: '', // 当前时间
				scrollTop: 0,
				timeout: 0,
				tipsShow: false,
				tipsData: [],
				submitTxt: null,
				current: 0,
				buyCount: 1,
			};
		},
		onLoad(options) {
			this.productId = options.productId
			this.getProductDetail()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
			if(this.scrollTop > 44) {
				this.background.backgroundColor = '#E60000'
			} else {
				this.background.backgroundColor = ''
			}
		},
		// 下拉刷新
		async onPullDownRefresh() {
			// 关闭下拉刷新
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 800)
		},
		methods: {
			toCart(){
				uni.switchTab({
					url:'/pages/shoppingCart/index'
				})
			},
			// 商品详情
			getProductDetail() {
				productDetail(this.productId).then(res => {
					// 如果是小象商品，则需要对富文本进行处理
					if(res.data.productDetail){
						res.data.productDetail = res.data.productDetail.replace(/\<img/gi,'<img style="max-width:100%;height:auto;display: block;" ')
						res.data.productDetail = this.fixHtml(res.data.productDetail)
					}
					this.detail = res.data || {}
				})
			},
			// 点击规格
			clickSpec(item,index){
				this.detail.price = item.platformPrice
				this.detail.mainImageUrl = item.pic
				this.current = index
			},
			// 提交订单
			toSubmit(){
				if(this.submitTxt == '加入购物车'){
					this.specsShow = false
					let str = '?skuId='+this.detail.skuList[this.current].id+'&buyCount='+this.buyCount;
					addGoodsToCart(str).then(res => {
						if(res.code == 200){
							this.$msg("加入购物车成功")
						}
					})
				}else{
					this.specsShow = false
					let goodsInfo = this.detail.skuList[this.current];
					goodsInfo.buyCount = this.buyCount;
					uni.setStorageSync('skuGoodsInfo', [goodsInfo])
					uni.navigateTo({
						url: '/pages/order/placeOrder'
					})
				}
			},
      		isArray,
			// 打开规格弹窗
			toBuy(str) {
				this.submitTxt = str
				this.specsShow = true
			},
			fixHtml (html) {
				if (html && html.length) {
					let result = [];
					(html.match(/background-image:url\(.+?(?=\))/g) || []).forEach(item => {
							result.push(item.replace(/background-image:url\(/g, ''));
					});
					if (result[0]) {
							return [...new Set(result)]
					}
					return html ? html.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display: block;" ') : ''
				}
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #f2f2f2;
	}
</style>
<style lang="scss" scoped>
.boxContent{
	max-height: 32vh;
	overflow-y: scroll;
}
::v-deep .u-countdown-colon {
	color: #ffffff !important;
}
.zq-label {
	background: #FF0000;
	border-radius: 4rpx;
	padding: 2rpx 8rpx;
	margin-right: 8rpx;
}
.gxz-lable {
	border: 2rpx solid #FF0000;
	border-radius: 8rpx;
	color: #FF0000;
	padding: 2rpx 8rpx;
	margin-left: 10rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22rpx;
}
.nav-r {
	.nav-r-icon1 {
		width: 46rpx;
		height: 46rpx;
	}
	.nav-r-icon2 {
		width: 42rpx;
		height: 48rpx;
	}
}
.nav-item {
	width: 56rpx;
	height: 56rpx;
	background: rgba(0, 0, 0, 0.25);
	border-radius: 10rpx;
	margin-right: 40rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}
.no-bg {
	background: none !important;
}
.goods-img {
	width: 100%;
	height: 690rpx;
}
.user-img {
	width: 80rpx;
	height: 80rpx;
	background: #f2f2f2;
	border-radius: 50rpx;
}
.success-img {
	width: 91rpx;
	height: 78rpx;
}
.process-img {
	width: 66rpx;
	height: 66rpx;
	background: #E60000;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50rpx;
	margin: 24rpx auto 6rpx auto;
	.process1 {
		width: 36rpx;
		height: 32rpx;
	}
	.process2 {
		width: 36rpx;
		height: 36rpx;
	}
	.process3 {
		width: 30rpx;
		height: 30rpx;
	}
}
.process-line1 {
	width: 206rpx;
	height: 4rpx;
	background: #E60000;
	position: absolute;
	top: 56rpx;
	right: -186rpx;
}
.process-line2 {
	width: 206rpx;
	height: 4rpx;
	background: #E60000;
	position: absolute;
	top: 56rpx;
	right: -186rpx;
}
.c-time {
	color: #808080;
	margin-top: 6rpx;
}
.desc-item {
	color: #808080;
	width: 207rpx;
	height: 47rpx;
	background: #F7F7F7;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 10rpx 0;
}
.footer-h {
	height: 160rpx;
}
.footer {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 120rpx;
	background: #ffffff;
	display: flex;
	justify-content: center;
	align-items: center;
	.boxCart{
		width: 30%;
	}
	.btn{
		flex: 1;
		height: 66rpx;
		background: #ECA52B;
		border-radius: 33rpx;
		color: #ffffff;
		font-size: 26rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.btn:first-child{
		background: #ecc279;
		border-radius: 120rpx 0 0 120rpx;;
	}
	.btn:last-child{
		border-radius:  0 120rpx 120rpx 0;
	}
	.btn-grey {
		background: #B3B3B3;
	}
}
.boxDetail{
	width: 100%;
	overflow: hidden;
}
 ::v-deep img{
	width: 100% !important;
	object-fit: cover !important;
 }
 ::v-deep .ssd-module{
		width: 87vw !important;
 }
 ::v-deep .ssd-module-wrap{
		object-fit: cover!important;
		height: auto !important;
 }
.contenr {
    .img {
        width: 100%;
        display: block;
    }
}

.content-box {
	width: 100%;
	height: 800rpx;
	position: relative;
	z-index: 1;
}

.btnPopup {
	border-radius: 20rpx;
	padding: 14rpx 58rpx;
	width: 80%;
	line-height: 60rpx;
	color: #fff;
	margin: 200rpx auto 20rpx auto;
}
.specBox{
	min-height: 50vh;
	.imgsBox {
		width: 140rpx;
		height: 140rpx;
		border-radius: 10rpx;
	}
	.boxItem{
		margin-top: 20rpx;
		display: inline-block;
		padding: 10rpx 30rpx;
		margin-right: 20rpx;
		border: 2rpx solid #333;
		color: #333;
		font-size: 24rpx;
		border-radius: 100rpx;
	}
	.isActive{
		background-color: #ECA52B;
		color: #fff;
		font-weight: bold;
		border-color: #ECA52B;
	}
}
.cartName{
	margin-top: -8rpx;
}
</style>
